import { Modal, Button, Form, Input, Select, DatePicker, Checkbox, Radio, RadioChangeEvent, message } from 'antd';
import { CheckboxChangeEvent } from 'antd/lib/checkbox';
const { Option } = Select;
let Temp_Dept: string = "大数据";
export let Hobbits: string = ' ';
export let Gender: string = '男';
export const ClassRoom = [
    { class_id: 1, class_name: '大数据' },
    { class_id: 2, class_name: '物联网' },
    { class_id: 3, class_name: '软件工程' },
    { class_id: 4, class_name: '人工智能' },
    { class_id: 5, class_name: '建筑电气' },
];
export const Hobbit = [
    { label: 'Java', value: "Jave" },
    { label: 'JavaScript', value: "JavaScript" },
    { label: 'Kolin', value: "Kolin" },
    { label: 'Python', value: "Python" },
    { label: 'PHP', value: "PHP" },
];
export const getHobbit = (e: CheckboxChangeEvent) =>
{
    let hobbit = e.target.value + ",";
    if (e.target.checked)
    {
        Hobbits += hobbit;
    }
    if (!e.target.checked)
    {
        Hobbits = Hobbits.substr(0, Hobbits.indexOf(hobbit));
    }
};

export const getGender = (e: RadioChangeEvent) =>
{
    Gender = e.target.value;
    console.log(Gender);
};
export default function NewEmployee(props: any)
{
    const onCancel = () =>
    {
        return props.NewEmpState[1](false);
    };

    const onChange = (e: any) =>
    {
        Temp_Dept = e;
        console.log(Temp_Dept);
    };

    const OnSubmit = async () =>
    {
        let form = new FormData(document.querySelector('#NewEmpInfo') as HTMLFormElement);
        form.append("ClassRoom", Temp_Dept.toString());
        form.append("Hobbit", Hobbits);
        form.append('Gender', Gender);
        for (let value of form.values())
        {
            if (value === '') return;
        }

        let response = await fetch("http://localhost:3065/newStudent", {
            method: "POST",
            body: form
        });
        let result = await response.json();
        result === 'OK' ? message.success("添加成功") : message.error("添加失败");
        props.NewEmpState[1](false);
    };



    return (
        <div>
            <Modal
                title="Basic Modal" visible={props.NewEmpState[0]}
                onCancel={onCancel}
                footer={[
                ]}
            >
                <Form id='NewEmpInfo'>
                    <Form.Item
                        label="Name"
                        name="EmpName"
                        rules={[{
                            required: true,
                            message: "Must Enter Name"
                        }]}
                    >
                        <Input name="EmpName" size="large" autoComplete="off" />
                    </Form.Item>
                    <Form.Item
                        label="Department"
                        name="Department"
                        initialValue="大数据"
                        rules={[{
                            required: true,
                            message: "Must Enter Department"
                        }]}
                    >
                        <Select
                            id="department"
                            onChange={onChange}
                            style={{ width: 200 }}
                            placeholder="Select a Department"
                            size='large'
                        >
                            {
                                ClassRoom.map((item: any, index: any) =>
                                {
                                    return (
                                        <Option value={item['class_name']} key={index}>{item['class_name']}</Option>
                                    );
                                })
                            }
                        </Select>
                    </Form.Item>
                    <Form.Item
                        label="Birthday"
                        name="Birthday"
                        rules={[{
                            required: true,
                            message: "Must Enter Birthday"
                        }]}
                    >
                        <DatePicker name="Birthday" size="large" />
                    </Form.Item>
                    <Form.Item
                        label="Gender"
                        name='Gender'
                        initialValue="男"
                    >
                        <Radio.Group onChange={getGender}>
                            <Radio value="男">男</Radio>
                            <Radio value="女">女</Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item
                        label="Hobbit"
                    >
                        <Checkbox.Group>

                            {
                                Hobbit.map((item: { label: string, value: string; }, index: number) =>
                                {
                                    return (
                                        <Checkbox key={index} value={item.value} onChange={(e) => { getHobbit(e); }}>{item.label}</Checkbox>
                                    );
                                })
                            }
                        </Checkbox.Group>
                    </Form.Item>
                    <Button key="Cancel" type="primary" htmlType="submit" style={{ float: "right" }} onClick={() => { OnSubmit(); }}>Submit</Button>
                    <Button key="Submit" style={{ float: "right", marginRight: "10px" }} onClick={() => { onCancel(); }}>Cancel</Button>
                </Form>
            </Modal>
        </div>

    );
}
